<#import "/macro.ftl" as m>
<@m.page_header title='后台' />
<div id="page-content-wrapper">

<div id="page-title">
    <h3>
        销售量分析
    </h3>
</div>

<div class="example-box">
	<div class="example-code">
        <a href="/stat/salesstatus" class="btn large primary-bg" title="">
            <span class="button-content">销售量现状</span>
        </a>
        &nbsp;&nbsp;
        <a href="/stat/salesconsist" class="btn large primary-bg" title="">
            <span class="button-content">销售量组成</span>
        </a>
        &nbsp;&nbsp;
        <a href="/stat/salestrend" class="btn large primary-bg" title="">
            <span class="button-content">销售量趋势</span>
        </a>
	</div>
</div>

<div class="pad10A">

<div style="col-md-12">
	<hr>
	<div class="form-row">
    	<div class="form-label col-md-4">
	    	<label for="">
                <font size="4">当前销售量：</font>
            </label>
	    	<label for="">
                <font size="3" color="blue">当前销售量 ${sales}元</font>
            </label>
    	</div>
		<div class="col-md-8" id="container" ></div>
    </div>
    <br><br>
    <hr>
	<div class="form-row">
        <div class="col-md-11" id="container2" style="height:1200px"></div>
    </div>
    
</div>
</div>
</div>

<script type="text/javascript" src="/assets/js/minified/demo/exporting.js"></script>
<script type="text/javascript" src="/assets/js/minified/demo/highcharts.js"></script>
<script type="text/javascript">
$(function () {
	$('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '区域销售量分析'
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>:{point.y}- {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '销售量',
            data: [
            	<#list pieMap?keys as pieKey>
            		['${pieKey}',  ${pieMap[pieKey]}],
            	</#list>
            ]
        }]
    });	
	
	$('#container2').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: '销售量组成'
        },
        xAxis: {
            categories: [<#list xdateList as xdate>'${xdate}',</#list>],
        },
        yAxis: {
            min: 0,
            title: {
                text: '元'
            },stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            backgroundColor: '#FFFFFF',
            reversed: true
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
            series: [
            <#list yDate?keys as resultKey>
            		{name:'${resultKey}',  data:[<#list yDate[resultKey] as value>${value},</#list>]},
        	</#list>
        ]
    });
    
});
</script>
